<template>
  <div>
    <el-dialog
      title="升级"
      :visible.sync="dialogVisible"
      width="60%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeClose"
      append-to-body
    >
      <div style="height: 50vh; overflow-y: scroll">
        <codemirror v-model="yamlValue" :options="cmOptions"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          class="el-button-primary-style"
          @click="upgradeYamlCloudNative"
        >
          升 级
        </el-button>
        <el-button
          type="primary"
          size="small"
          class="el-button-primary-style"
          @click="beforeClose(null)"
        >
          取 消
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {codemirror} from "vue-codemirror";
  import "codemirror/lib/codemirror.css";
  import "codemirror/mode/yaml/yaml.js";

  export default {
    name: "UpdateYamlCloudInfo",
    components: {
      codemirror,
    },
    props: ["tmpCloudNative"],
    data() {
      return {
        dialogVisible: false,
        cmOptions: {
          mode: "yaml", // 使用YAML模式
          theme: "default", // 使用默认主题
          lineNumbers: true, // 显示行号
          line: true, // 显示行高亮
          styleActiveLine: true, // 高亮当前行
          matchBrackets: true, // 括号匹配高亮
          autoCloseBrackets: true, // 自动闭合括号
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 显示行号和折叠标记
          foldGutter: true, // 启用折叠功能
        },
        yamlValue: "",
        cloudNativeInfo: {
          id: "",
          yamlDeployName: "",
          yamlDeployType: "",
          yamlName: "",
          yamlVersion: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
        },
        tmpCloudNativeInfo: {},
      };
    },
    methods: {
      viewYamlCloudNative() {
        this.$appManageApi.viewCloudYaml(this.tmpCloudNative.id).then((res) => {
          if (res && res.code === 200) {
            this.yamlValue = res.data;
          }
        });
      },
      upgradeYamlCloudNative() {
        this.cloudNativeInfo.yamlContent = this.yamlValue;
        this.$appManageApi.upgradeCloudYaml(this.cloudNativeInfo).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.data);
            this.beforeClose(null);
          }
        });
      },
      beforeClose(done) {
        this.$emit("closeUpdateYamlCloudInfoRef");
        this.cloudNativeInfo = {
          id: "",
          yamlDeployName: "",
          yamlDeployType: "",
          yamlName: "",
          yamlVersion: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
        };
        this.yamlValue = "";
        this.dialogVisible = false;
        if (done !== null) {
          done();
        }
      },
    },
    beforeMount() {
      this.viewYamlCloudNative();
      this.tmpCloudNativeInfo = {
        ...JSON.parse(JSON.stringify(this.tmpCloudNative)),
      };
      this.cloudNativeInfo.id = this.tmpCloudNativeInfo.id;
      this.cloudNativeInfo.yamlDeployName =
        this.tmpCloudNativeInfo.yamlDeployName;
      this.cloudNativeInfo.yamlDeployType =
        this.tmpCloudNativeInfo.yamlDeployType;
      this.cloudNativeInfo.yamlName = this.tmpCloudNativeInfo.yamlName;
      this.cloudNativeInfo.yamlVersion = this.tmpCloudNativeInfo.yamlVersion;
      this.cloudNativeInfo.yamlDescription =
        this.tmpCloudNativeInfo.yamlDescription;
      this.cloudNativeInfo.yamlImages = this.tmpCloudNativeInfo.yamlImages;
    },
  };
</script>

<style scoped>
</style>
